<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- v-model：绑定当前激活的tab栏 -->
      <!-- 它会找到el-tab-pane里name值一样的选中 -->
      <el-tabs v-model="activeName">
        <!-- 要有多少个tab栏，就加几个el-tab-pane -->
        <!-- label用来控制显示tab栏的标题 -->
        <!-- 每个tab栏里的内容，就放在这个el-tab-pane的双标签里面 -->
        <el-tab-pane label="角色管理" name="first">
          <!-- el-button -->
          <el-row>
            <el-button
              icon="el-icon-plus"
              size="small"
              type="primary"
              @click="showDialog = true"
              >新增角色</el-button
            >
          </el-row>
          <!-- el-table -->
          <!-- data用来绑定el-table的数据 -->
          <!-- 它是一个数组，数组有多少个元素，el-table就生成多少行 -->
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="角色名" width="180">
            </el-table-column>
            <el-table-column prop="description" label="描述"> </el-table-column>

            <!-- 默认只能显示文字内容，如果你想放别的东西就用插槽自定义 -->
            <el-table-column prop="description" label="操作">
              <!-- 作用域插槽：拿到数据 -->
              <!-- <template slot-scope="scope">
                {{ scope.row }}
              </template> -->
              <!-- 用结构语法直接取出row属性：row属性就是这一行的数据 -->
              <template slot-scope="{ row }">
                <el-link type="primary">分配权限</el-link>
                <el-link
                  style="margin:0 10px;"
                  type="primary"
                  @click="doEdit(row.id)"
                  >修改</el-link
                >
                <el-link type="primary" @click="delRole(row.id)">删除</el-link>
              </template>
            </el-table-column>
          </el-table>
          <!-- el-pagination -->
          <!-- current-change：改变页码会触发的事件 -->
          <!-- current-page： 用来设置当前页的属性 -->
          <!-- page-size： 页容量：每页显示多少条 -->
          <!-- total： 设置数据总数量 -->
          <!-- layout：指定这个分页从左到右有哪些元素 -->
          <el-pagination
            style="text-align:center;"
            :current-page.sync="pageInfo.page"
            :page-size="pageInfo.pagesize"
            :total="pageInfo.total"
            layout="total, prev, pager, next"
            @current-change="getRoleList"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <el-form
            :model="comForm"
            style="width:450px;margin:0 auto;"
            label-width="80px"
          >
            <el-form-item label="企业名称">
              <el-input v-model="comForm.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input v-model="comForm.companyAddress" disabled></el-input>
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input v-model="comForm.companyPhone" disabled></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="comForm.mailbox" disabled></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="comForm.remarks" disabled></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <el-dialog :title="title" :visible="showDialog" @close="cancelDialog">
        <el-form ref="addForm" :model="addForm" :rules="addRules">
          <el-form-item prop="name" label="角色名称" label-width="90px">
            <el-input v-model="addForm.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="description" label="角色描述" label-width="90px">
            <el-input
              v-model="addForm.description"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getRoleList,
  delRole,
  addRole,
  getRoleDetail,
  editRole,
  getCompanyDetail
} from '@/api/setting'
import { mapGetters } from 'vuex'
export default {
  name: 'setting',
  data () {
    return {
      comForm: {},
      activeName: 'first',
      tableData: [],
      pageInfo: {
        page: 1,
        pagesize: 10,
        total: 0
      },
      showDialog: false,
      addForm: {},
      addRules: {
        name: [{ required: true, message: '请输入角色名', trigger: 'blur' }],
        description: [
          { required: true, message: '请输入角色名', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getRoleList()
    console.log('公司id', this.companyId)
    this.getCompanyInfo()
  },
  computed: {
    title () {
      return this.addForm.id ? '编辑角色' : '新增角色'
    },
    ...mapGetters(['companyId'])
  },
  methods: {
    // 根据id获取企业详情
    async getCompanyInfo () {
      const res = await getCompanyDetail(this.companyId)
      this.comForm = res.data
    },
    // 加载数据
    async getRoleList () {
      const res = await getRoleList(this.pageInfo)
      console.log(res)
      this.pageInfo.total = res.data.total
      this.tableData = res.data.rows
    },
    // 删除角色
    async delRole (id) {
      // 删除角色前提示一下
      try {
        await this.$confirm('确定要删除么？')
        // 能来这里就代表着点了确定，就调用删除
        await delRole(id)
        // 提示删除成功,并加载数据
        this.$message.success('删除成功')
        this.getRoleList()
      } catch (error) {
        console.log(error)
      }
    },
    //新增角色
    save () {
      // 保存前先进行表单验证
      this.$refs.addForm.validate(async v => {
        if (v) {
          // 全部通过，可以发送请求了
          // 判断是否有id
          if (this.addForm.id) {
            // 有id,证明是编辑，则发起编辑请求
            await editRole(this.addForm)
          } else {
            // 否则发起新增请求
            await addRole(this.addForm)
          }
          // 提示新增（编辑）成功，并重新加载，隐藏对话框
          this.$message.success(this.title + '成功')
          this.getRoleList()
          this.showDialog = false
        }
      })
    },
    // 取消事件，隐藏对话框
    cancelDialog () {
      // 清空表单数据
      this.addForm = {}
      // 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
      this.$refs.addForm.resetFields()
      // 隐藏对话框
      this.showDialog = false
    },
    // 修改事件
    async doEdit (id) {
      // 先根据id获取数据
      const res = await getRoleDetail(id)
      // 在赋值给对话框的表单绑定的对象
      this.addForm = res.data
      // 在显示对话框
      this.showDialog = true
    }
  }
}
</script>

<style>
.el-tabs__content {
  padding: 40px 20px;
}
</style>
